<template>
  <div>
    <el-table-v2 :columns="tableRowData" :data="allData" :width="width" :height="height" :estimated-row-height="31"
      :header-height="32" fixed :v-scrollbar-size="0"><template #empty>
        <div class="flex items-center justify-center h-100%"></div>
      </template>
    </el-table-v2>
    <el-button @click="open" type='success'>创建websocket链接</el-button>
    <el-button @click="sendDevice">订阅设备数据</el-button>
    <el-button @click="sendPoint">订阅点位数据</el-button>
    <el-button @click="loadData">模拟订阅点位数据</el-button>

  </div>
</template>
<script setup>
import { websokcetJson, websocketInit, wbsend, wbaccept } from "./websocket.js"
import wsConstant from "./websocketConstant";
import { storeToRefs } from 'pinia';
import { ref, reactive, computed } from 'vue';
import data5000 from "../assets/data5000.json";
import idarr from "./idarr2000.json"
import { useTableDataStore } from "../stores/counter.js"
const store = useTableDataStore();
const allData = computed(() => store.allData);

const { pushData2TableData, pushData2TableData2,pushData2TableData3 } = store;




const width = ref(1920);
const height = ref(800);
const tableData = reactive([]);

const tableRowData = reactive([
  {
    "name": "displayName",
    "displayName": "名称",
    "key": "displayName",
    "dataKey": "id",
    "title": "ID",
    "flag": 259,
    "width": 389.75
  },
  {
    "name": "displayName",
    "displayName": "名称",
    "key": "displayName",
    "dataKey": "displayName",
    "title": "名称",
    "flag": 259,
    "width": 389.75
  },
  {
    "name": "type",
    "displayName": "类型",
    "key": "type",
    "dataKey": "type",
    "title": "类型",
    "flag": 259,
    "width": 389.75
  },
  {
    "name": "show",
    "displayName": "输出",
    "key": "id",
    "dataKey": "show",
    "title": "输出",
    "flag": 259,
    "width": 389.75,
  },
  {
    "name": "address",
    "displayName": "地址",
    "flag": 256,
    "key": "path",
    "dataKey": "path",
    "title": "地址",
    "width": 389.75,
  }
]); // 列表显示的列
import data1 from "./data1.json";

import data2 from "./data2.json";
import data3 from "./data3.json";
import data4 from "./data4.json";
// 开始加载数据
const loadData = () => {
  setTimeout(() => {
    pushData2TableData3(data1);
  }, 1000)
  setTimeout(() => {
    pushData2TableData3(data2);
  }, 2000)
  setTimeout(() => {
    pushData2TableData3(data3);
  }, 3000)
  setTimeout(() => {
    pushData2TableData3(data4);
    console.log(allData);
  }, 4000)
  
}
const open = () => {
  websocketInit("192.168.1.114:8088");
  wbaccept('192.168.1.114:8088', wbAcceptData);
}
const sendPoint = () => {
  var postJson = {
    cmd: "subscribe",
    data: idarr,
    tag: 123,
    view: '',
    api: "findAttributes",
    ppath: "",
    eventId: "search", // 自定义字段，用来区分是什么操作;
  };
  wbsend("192.168.1.114:8088", postJson);
}

const sendDevice = () => {
  var postJson = {
    "cmd": "subscribe",
    "data": [
      {
        "id": "2cc2"
      }
    ],
    "tag": 5,
    "view": "ModbusTcpNodeSheet",
    "api": "findAttributes",
    "ppath": "Root/metaData/ModbusTcpConnector222",
    "eventId": "search"
  }
  wbsend("192.168.1.114:8088", postJson);
}

// 接收到websocket的事件
function wbAcceptData(res) {
  
  var acceptData = JSON.parse(res.data);
  formatterWsData(acceptData);
  handleWSdata(acceptData);
  
}
function handleWSdata(acceptDatas) {
  
  if (acceptDatas.hasOwnProperty("events") && Array.isArray(acceptDatas.events)) {
    acceptDatas.events.forEach(acceptData => {
      if (acceptData.eventId == "search") {
        // 添加到大数据
        if(acceptData.pid == "2cc2"){
          
          pushData2TableData(acceptData["data"]);
        }else{
          
          pushData2TableData2(acceptData);
        }
      }
    })
  } else {
    // 数据有问题
  }
  console.log(allData)
}

// 把对应的字段改成长字段,e->events，详情请见assets/constant/websocketConstant
function formatterWsData(wsData) {
  if (wsData.hasOwnProperty("e")) {
    recursionJson(wsData);
  } else {
    return wsData;
  }
}
// 递归更改对象
function recursionJson(data) {
  if (Array.isArray(data)) {
    data.forEach(items => {
      recursionJson(items);
    })
  } else {
    for (const key in data) {
      const element = data[key];
      if (wsConstant.hasOwnProperty(key)) {
        delete data[key];
        data[wsConstant[key]] = element;
      }
      if (typeof element == 'object') {
        recursionJson(element);
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>